<template>
  <div>
    <el-container>
      <el-header class="hed">欢迎VIP用户:{{store.getters.getUser.username}}
        <el-button @click="out">退出登录</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px" class="as">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            router
          >
            <el-menu-item index="/home">
                <el-icon><Menu /></el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统设置</span>
              </template>
                <el-menu-item index="/menu">菜单管理</el-menu-item>
                <el-menu-item index="/role">角色管理</el-menu-item>
                <el-menu-item index="/user">管理员管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><ShoppingCart /></el-icon>
                <span>商城管理</span>
              </template>
                <el-menu-item index="/cate">商品分类</el-menu-item>
                <el-menu-item index="/specs">商品规格</el-menu-item>
                <el-menu-item index="/goods">商品管理</el-menu-item>
                <el-menu-item index="/member">会员管理</el-menu-item>
                <el-menu-item index="3-2">轮播图管理</el-menu-item>
                <el-menu-item index="3-2">秒杀活动</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
            <!-- 二级路由出口 -->
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
let store = useStore()
let router = useRouter()
import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 退出登录
const out = () => {
  //  ElMessage(`click on itme ${command}`);
    // 清空仓库内容/缓存
    store.dispatch("changeUserInfo", false);
    // 退出到登录页面
    router.push("/login");
}
</script>

<style lang="less" scoped>
.hed {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: #b5bfcf;
}

.as {
  //   width: 200px;
  height: 100%;
  background: #202229;
}
</style>
